@import url("../../assets/fonts/fonts.css");

body {
  --font-inter: "InterVar", "Inter", sans-serif;
  --font-lora: "Lora", serif;
  --font-roboto: "Roboto", sans-serif;
  --font-merriweather: "Merriweather", serif;
  --font-geist: "Geist Mono", monospace;
  --font-ibm-plex: "IBM Plex Sans", sans-serif;
  --font-eb-garamond: "EB Garamond", serif;
  --font-jetbrains: "JetBrains Mono", monospace;
  --font-comfortaa: "Comfortaa", cursive;
  --font-caveat: "Caveat", cursive;
  --font-nunito: "Nunito", sans-serif;
  --font-comic-sans: "Comic Sans MS", sans-serif;
}

.prose-sm {
  min-width: 100%;
  caret-color: theme("colors.blue.600");
  padding: 2.5em 0;
  background: white;
  font-size: 15px;
}

@media only screen and (max-width: 640px) {
  .prose-sm {
    display: block;
    padding: 2.5em 1rem;
    max-width: 100%;
    min-width: 100%;
  }
}

span[data-comment-id].display {
  border-bottom: 2px dashed var(--surface-blue-3);
  user-select: text;
  cursor: pointer;
  scroll-margin: 4rem;
}
span[data-comment-id].display:hover,
span[data-comment-id].display.active {
  background: var(--surface-blue-2);
}
span[data-comment-id]:not([data-resolved="true"]) {
  border-bottom: 2px dashed var(--outline-amber-2);
  user-select: text;
  cursor: pointer;
  scroll-margin: 4rem;
}

span[data-comment-id]:not([data-resolved="true"]):hover,
span[data-comment-id]:not([data-resolved="true"]).active {
  background: rgba(250, 204, 21, 0.4);
}

@media print {
  .Prosemirror {
    p:empty::after {
      content: "\00A0";
    }
  }

  #page-break-div {
    border: none !important;
    margin: none !important;
  }
  span[data-annotation-id] {
    background-color: transparent !important;
    border-bottom: none !important;
    padding: none !important;
  }
  img {
    box-shadow: none;
    border-radius: 0px;
  }
  img[dataalign="left"] {
    display: block;
    margin-right: auto;
  }

  img[dataalign="center"] {
    display: block;
    margin: 0 auto;
  }

  img[dataalign="right"] {
    display: block;
    margin-left: auto;
  }

  img[datafloat="left"] {
    float: left;
    margin-right: 1rem;
  }

  img[datafloat="right"] {
    float: right;
    margin-left: 1rem;
  }
  video[dataalign="left"] {
    display: block;
    margin-right: auto;
  }

  video[dataalign="center"] {
    display: block;
    margin: 0 auto;
  }

  video[dataalign="right"] {
    display: block;
    margin-left: auto;
  }

  video[datafloat="left"] {
    float: left;
    margin-right: 1rem;
  }

  video[datafloat="right"] {
    float: right;
    margin-left: 1rem;
  }
}
